import axios, { type InternalAxiosRequestConfig, type AxiosResponse, AxiosError } from 'axios'
import { useUserStore } from '@/stores'
import { ElMessage } from 'element-plus'
import router from '@/router'

// 自己接口的代理基地址
const baseURL = '/api'

// 经验：.env.development环境文件必须要与vite.configh.ts一个路径下
// console.log(process.env.NODE_ENV)
console.log(import.meta.env.MODE)
console.log(import.meta.env.VITE_APP_BASE_API)
const instance = axios.create({
  // TODO 1. 基础地址，超时时间
  baseURL: import.meta.env.VITE_APP_BASE_API, // process.env.NODE_ENV可以判断环境
  timeout: 20000
})

// 请求拦截器
// 成功执行第一个回调函数，失败执行第二个
instance.interceptors.request.use(
  (config: InternalAxiosRequestConfig<any>) => {
    // 经验1：useUserStore是一个响应式钩子,应该仅在Vue组件内部使用，
    // ts文件中使用useUserStore需要在实例的函数中使用
    const userStore = useUserStore()
    // TODO 2. 携带token
    if (userStore.token) {
      config.headers.Authorization = `Bearer ${userStore.token}`
    }
    return config
  },
  (err: AxiosError<any>) => Promise.reject(err)
)

// 响应拦截器
instance.interceptors.response.use(
  (res: AxiosResponse<any>) => {
    // TODO 4. 摘取核心响应数据
    // 判断blob格式
    // console.log(res)
    if (res.data instanceof Blob) return res.data
    const { data, message, success } = res.data
    if (success) {
      return data
    }
    // TODO 3. 处理业务失败，统一给出提示
    // 处理业务失败, 给错误提示，抛出错误
    ElMessage.error(message || '服务异常') // 如果前面没有输出“服务器异常”
    return Promise.reject(message)
  },
  (err: AxiosError<any>) => {
    const userStore = useUserStore()
    // TODO 5. 处理401错误
    // 错误的特殊情况 => 401 权限不足未登录、token 过期 => 拦截到登录
    if (err.response?.status === 401) {
      ElMessage.error('登录超时')
      userStore.removeToken()
      userStore.setUser({})
      router.push('/login')
      return Promise.reject(err)
    }
    // 错误的默认情况 => 直接给提示
    ElMessage.error(err.response!.data!.message || '服务异常')
    return Promise.reject(err)
  }
)

export default instance
export { baseURL }
